<template>
    <div class="container scopClass">

        <el-tabs v-model="activeName" @tab-click="handleClick">
            <!-- 选项1开始 -->
            <!-- <el-tab-pane label="追溯查询" name="追溯查询">-->
                <h3 style="margin: 20px 0">追溯查询</h3>
                <el-form ref="form" :model="form1" label-width="100px" label-position="left">
                    <el-form-item label="查询方式" :rules="{ required: true, message: '不能为空' }">
                        <el-radio v-model="form1.method" label="1">产品批号查询</el-radio>
                        <el-radio v-model="form1.method" label="2">追溯码查询</el-radio>
                    </el-form-item>
                    <div v-show="form1.method != 2">
                        <el-form-item label="企业名称" @click.native="showTable1" :rules="{ required: true, message: '不能为空' }">
                            <el-input style="width: 220px" placeholder="请选择"></el-input>
                        </el-form-item>
                        <el-form-item label="追溯类型" @click.native="showTable1" :rules="{ required: true, message: '不能为空' }">
                            <el-input style="width: 220px" placeholder="请选择"></el-input>
                        </el-form-item>
                        <el-form-item label="品名" @click.native="showTable1" :rules="{ required: true, message: '不能为空' }">
                            <el-input style="width: 220px" placeholder="请选择"></el-input>
                        </el-form-item>
                        <el-form-item label="批号" @click.native="showTable1" :rules="{ required: true, message: '不能为空' }">
                            <el-input style="width: 220px" placeholder="请选择"></el-input>
                        </el-form-item>
                    </div>
                    <el-form-item v-show="form1.method == 2" label="追溯码" :rules="{ required: true, message: '不能为空' }">
                        <el-input v-model="form1.zsId" placeholder="请扫描/输入追溯码" style="width: 220px"></el-input>
                    </el-form-item>
                </el-form>
        </el-tabs>

		<el-dialog title="请选择" :visible.sync="dialogTableVisible">
		    <el-row>
                <el-col :span="6">
		            <el-form>
		                <el-form-item label="企业名称">
		                    <el-select v-model="name"  value-key="id" @change="getcompanyname" placeholder="" style="width:150px">
		                    	<el-option v-for="item in listall" :key="item.id" :label="item.abbreviation" :value="item.id">{{item.abbreviation}}</el-option>
		                    </el-select>
		                </el-form-item>
		            </el-form>
		        </el-col>
		        <el-col :span="5">
		            <el-form>
		                <el-form-item label="追溯类型">
		                    <el-select v-model="queryForm1.type" style="width:100px;">
		                        <el-option
		                            :label="item"
		                            :value="item"
		                            v-for="(item, index) in queryForm1.types"
		                            :key="index"
		                        ></el-option>
		                    </el-select>
		                </el-form-item>
		            </el-form>
		        </el-col>
		        <el-col :span="6">
					<el-form>
						<el-form-item label="品名">
							<el-input style="width:200px;" v-model="searchName"></el-input>
						</el-form-item>
					</el-form>

		        </el-col>
		        <el-col :span="1"><el-button  @click="getTable1" type="primary">查询</el-button></el-col>
		    </el-row>
		    <el-table :data="tableData1" border ref="multipleTable" header-cell-class-name="table-header">
		        <el-table-column prop="sztype" sortable label="追溯类型"></el-table-column>
		        <el-table-column prop="productName" sortable label="品名"></el-table-column>
		        <el-table-column prop="storageBatch" sortable label="批号"></el-table-column>
		        <el-table-column label="操作" width="150" align="center">
		            <template slot-scope="scope">
		                <el-button type="text" @click="handleSelect(scope.$index, scope.row)">选择</el-button>
		            </template>
		        </el-table-column>
		    </el-table>
		    <el-pagination
                v-if='total1 == 0'
		        layout="total, prev, pager, next, jumper"
		        :page-size="pagesize1"
		        :current-page.sync="queryForm1.page"
		        :total="total1"
		        @current-change="handleCurrentChange1"
		        style="margin-top: 20px"
		    ></el-pagination>
		</el-dialog>

		<el-form>
            <el-form-item style="padding-left: 120px" class="footerFixed">
                <el-button @click="handleRecall" type="primary">提交</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script>
	import axios from "axios"
import { company_get_child } from '@/request/supervisionCenterApi';
export default {
    data() {
        return {
			loading:false,
			dialogTableVisible1:false,
            activeName: '追溯查询',
            tableDatalist:[],
			tableDataone:[],
            dialogTableVisible: false,
            form1: {
                method: '1',
                type: '',
                name: '',
                id: '',
                zsId: ''
            },
            queryForm1: {
                page: 1,
                type: '种植',
                types: ['种植','采收','初加工', '采购入库'],
                enterprise: '原链科技',
                enterprises: ['原链科技','联科信息','卧龙江',],
                name: '大黄',
                names: ['大黄', '天麻']
            },
            tableData1: [],
			recalls:{},
			chains:[],
            // tab - 2

            // tab - 3
            ruleForm: {},
            recall: true,
            recallFixed: false,
            form3: {},

            searchName: '',
            searchName2: '',
            searchName3: '',
            total1: 0,
            pagesize1: 10,
            total2: 0,
            currentPage: 1,
            pagesize2: 10,
            total3: 0,
            currentPage3: 1,
            pagesize3: 10,

            listUrl: '',
            action: '',
            added: true,
            check: true,
			source:'',
			id:'',
			reason:'',
			name:'',
			listall:''
        };
    },
    created() {},
    mounted() {
		this.getcompany()
        if(this.queryForm1.type == "初加工"){
        	this.source = "加工入库"
        	this.init4()
        }else if(this.queryForm1.type == "采购入库"){
        	this.source = this.queryForm1.type
        	this.init1()
        }else if(this.queryForm1.type == "种植"){
        	this.init2()
        }else{
			this.init3()
        }

        this.judgmentAuthority()
    },
    destroyed: function () {},
    methods: {
		getcompanyname(ele){

		},
		getcompany(){
			company_get_child("").then((res)=>{
				this.listall = res.data
			})
		},
        // tabs
        handleClick(tab, event) {
            this.recallFixed = false;
            this.recall = true;
        },

        showTable1() {
            this.dialogTableVisible = true;
        },
        handleSelect(index, row) {
			this.recalls.productName = row.productName
			this.recalls.batchNo = row.storageBatch
			this.recalls.traceStep = row.sztype

				if(this.queryForm1.type == "初加工"){
					this.$router.push({
						path:'/review/checkreview',
						query:{id:row.id}
					})
				}else if(this.queryForm1.type == "采购入库"){
					this.$router.push({
						path:'/review/check',
						query:{id:row.id}
					})
				}else if(this.queryForm1.type == "种植"){
					this.$router.push({
						path:'/review/tending',
						query:{
							id:row.id
						}
					})
				}else{
					this.$router.push({
						path:'/review/checkrecovery',
						query:{id:row.id}
					})
				}


        },
        getTable1() {
			// console.log(1)
			this.currentPage =1
			if(this.queryForm1.type == "初加工"){
				this.source = "加工入库"
				this.init4()
			}else if(this.queryForm1.type == "采购入库"){
				this.source = this.queryForm1.type
				this.init1()
			}else if(this.queryForm1.type == "种植"){
				this.init2()
			}else{
				this.init3()
				// console.log(111)
			}


        },
        handleCurrentChange1(val) {
            this.currentPage = val;
            if(this.queryForm1.type == "初加工"){
            	this.source = "加工入库"
            	this.init4()
            }else if(this.queryForm1.type == "采购入库"){
            	this.source = this.queryForm1.type
            	this.init1()
            }else if(this.queryForm1.type == "种植"){
            	this.init2()
            }else{
				this.init3()
            }
        },
		init4(){
			let data = {
				page:this.currentPage,
				productName:this.searchName,
				companyId:this.name
			}
			axios.post(this.$store.state.pathurl + "/plant/processDetail/findByList",data).then((res)=>{
				this.tableData1 = res.rows
				this.total1 = res.total
				for(var i=0;i<this.tableData1.length;i++){
					this.tableData1[i].sztype = this.queryForm1.type
					this.tableData1[i].productName = this.tableData1[i].productName
					this.tableData1[i].storageBatch = this.tableData1[i].batch
				}
			})
		},
		init3(){
			let data = {
				page:this.currentPage,
				searchName:this.searchName,
				companyId:this.name
			}
			axios.post(this.$store.state.pathurl + "/plant/reap/findByList",data).then((res)=>{
			    this.tableData1 = res.rows
			    this.total1 = res.total
			    for(var i=0;i<this.tableData1.length;i++){
			    	this.tableData1[i].sztype = this.queryForm1.type
			    	this.tableData1[i].productName = this.tableData1[i].reapName
			    	this.tableData1[i].storageBatch = this.tableData1[i].batch
			    }
			})
		},
		init2(){
			axios.post(this.$store.state.pathurl + "/plant/plant/findByList",{page:this.currentPage,plantName:this.searchName,companyId:this.name}).then((res)=>{
			    this.tableData1 = res.rows
			    this.total1 = res.total
				for(var i=0;i<this.tableData1.length;i++){
					this.tableData1[i].sztype = this.queryForm1.type
					this.tableData1[i].productName = this.tableData1[i].plantName
					this.tableData1[i].storageBatch = this.tableData1[i].batch
				}
			})
		},
        init1() {
            // this.getTable1();

			let data = {
				warehouseId:this.warehouseId,
				productName:this.searchName,
				source:this.source,
				page:this.currentPage,
				companyId:this.name
			}
			axios.post(this.$store.state.pathurl + "/plant/storage/manage/findByList",data).then((res)=>{
				this.tableData1 = res.rows
				this.total1 = res.total
				for(var i=0;i<this.tableData1.length;i++){
					this.tableData1[i].sztype = this.queryForm1.type
					this.tableData1[i].storageBatch = this.tableData1[i].batch
					var st = this.tableData1[i].specsUnit.substr(this.tableData1[i].specsUnit.lastIndexOf('/', this.tableData1[i].specsUnit.lastIndexOf('/') - 1) + 1);
					var str = st.lastIndexOf("\/")
					this.tableData1[i].units = st.substring(0,str)
				}

			})
        },
		handleRecall() {
			this.$confirm('请仔细核对所填信息，提交后该批产品全部召回，无法再次销售！', '提示', {
			    confirmButtonText: '确定',
			    cancelButtonText: '取消',
			    type: 'warning'
			}).then(() => {
				// this.loading = true
				let data = {
					recall:this.recalls,
					chains:this.chains
				}
				// console.log(data)
				recall_add(data).then((res)=>{
					this.$notify({
					    title: '提示',
					    message: '提交成功',
					    type: 'success',
					    duration:1000
					});
					// this.loading = false
					this.chains = []
					this.recalls = {}
					this.recall = true
					this.getrecallpage()
				})
			})
		},

        //判定操作按钮显示
        judgmentAuthority() {
            var type = JSON.parse(localStorage.getItem('panduanzhuangtai'));
            type.map((item1) => {
                if (item1.name == '追溯查询' && item1.children != null) {
                    for (var i = 0; i < item1.children.length; i++) {
                        if (item1.children[i].name == "查询") this.check = false;
                        if (item1.children[i].name == '新增') this.added = false;
                    }
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
// 深度作用器
/deep/.upload-daoru {
    .el-upload {
        border: none;
        width: auto;
        height: auto;
        border-radius: 0;
        float: right;
        margin-right: 10px;
    }
}
.el-col {
    margin-bottom: 0;
}

.el-pagination {
    text-align: center;
}
</style>
